<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <title>库房列表</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
    <meta name="format-detection" content="telephone=no"/>
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="images/house.ico">
    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="images/house.ico">
    <link rel="apple-touch-icon-precomposed" sizes="512x512" href="images/house.ico">
    <link rel="shortcut icon" href="images/house.ico">

    <link rel="stylesheet" href="plugins/bootstrap/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="css/base.css"/>
    <link rel="stylesheet" href="css/base.css"/>
    <link rel="stylesheet" href="css/loaders.min.css"/>
    <link rel="stylesheet" href="css/loading.css"/>
    <link rel="stylesheet" href="css/style.css"/>
    <link rel="stylesheet" href="plugins/dropload/dropload.css"/>

    <script src="plugins/jquery.min.js"></script>
    <script src="plugins/bootstrap/js/bootstrap.min.js"></script>
    <script src="plugins/bootstrap-select/js/bootstrap-select.min.js"></script>
    <script src="plugins/bootstrap-select/js/i18n/defaults-zh_CN.min.js"></script>
    <script src="plugins/bootstrap-fileupload/fileinput.min.js"></script>
    <script src="plugins/bootstrap-fileupload/locales/zh.js"></script>
    <script src="plugins/dropload/dropload.js"></script>
    <script src="js/menu.js"></script>
    <style>
    </style>
</head>
<!--loading页开始-->
<div class="loading">
    <div class="loader">
        <div class="loader-inner pacman">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
    </div>
</div>
<body>
<!--header star-->
<!--<header>
    <a href="javascript:history.go(-1)">
        <i class="icon-arrow-l fl"></i>
    </a>
    <div>库房列表</div>
    <div class="clear"></div>
</header>-->
<!--filter-->
<div class="filter-container filter-top clearfloat" id="main">
    <!--mask-->
    <div class="menu-list clearfloat">
        <div class="mask"></div>
        <ul class="" id="oe_menu">
            <li>
                <a href="javascript:void(0)" class="deactive" data-target="division">区域<i></i></a>
            </li>
            <li>
                <a href="javascript:void(0)" class="deactive" data-target="rent">租金<i></i></a>
            </li>
            <li>
                <a href="javascript:void(0)" class="deactive" data-target="filter">筛选<i></i></a>
            </li>
        </ul>
    </div>
    <div class="menu-context">
        <ul id="division" class="none">
            <li><a href="javascript:void(0)">大兴区</a></li>
            <li><a href="javascript:void(0)">东城区</a></li>
            <li><a href="javascript:void(0)">西城区</a></li>
            <li><a href="javascript:void(0)">海淀区</a></li>
            <li><a href="javascript:void(0)">丰台区</a></li>
            <li><a href="javascript:void(0)">朝阳区</a></li>
            <li><a href="javascript:void(0)">昌平区</a></li>
            <li><a href="javascript:void(0)">房山区</a></li>
            <li><a href="javascript:void(0)">通州区</a></li>
            <li><a href="javascript:void(0)">顺义区</a></li>
            <li><a href="javascript:void(0)">平谷区</a></li>
            <li><a href="javascript:void(0)">怀柔区</a></li>
            <li><a href="javascript:void(0)">石景山区</a></li>
            <li><a href="javascript:void(0)">门头沟区</a></li>
        </ul>
        <ul id="rent" class="none">
            <li><a href="javascript:void(0)">100-200元</a></li>
            <li><a href="javascript:void(0)">300-500元</a></li>
            <li><a href="javascript:void(0)">600-800元</a></li>
            <li><a href="javascript:void(0)">800-1000元</a></li>
        </ul>
        <ul id="filter" class="none">
            <li><a href="javascript:void(0)">平台</a></li>
            <li><a href="javascript:void(0)">高台</a></li>
            <li><a href="javascript:void(0)">楼库</a></li>
        </ul>
    </div>
    <!--list store-->
    <div class="recom clearfloat">
        <div class="list-store content clearfloat box-s">
            <div class="lists"></div>
<!--            <div class="list clearfloat fl box-s" onclick="javascript:window.location.href='detail-store.html'">
                <div class="tu clearfloat">
                    <p class="jian"></p>
                    <img src="upload/list-tu.jpg"/>
                </div>
                <div class="center clearfloat">
                    <div class="tit fl">
                        <p class="normal">北京（大兴）1号院</p>
                        <p class="min">位置： 北京大兴</p>
                        <p class="min">面积： 1500.0㎡</p>
                        <span class="label-red">冷冻库</span>
                        <span class="label-red">高台</span>
                    </div>
                    <div class="right clearfloat">
                        <span class="fr"><p class="price">0.11</p><samp>元/㎡/天/起</samp></span>
                    </div>
                </div>
            </div>
            <div class="list clearfloat fl box-s">
                <div class="tu clearfloat">
                    <p class="jian"></p>
                    <img src="upload/list-tu.jpg"/>
                </div>
                <div class="center clearfloat">
                    <div class="tit fl">
                        <p class="normal">北京（大兴）1号院</p>
                        <p class="min">位置： 北京大兴</p>
                        <p class="min">面积： 1500.0㎡</p>
                        <span class="label-blue">普通库</span>
                        <span class="label-blue">平台</span>
                    </div>
                    <div class="right clearfloat">
                        <span class="fr"><p class="price">0.11</p><samp>元/㎡/天/起</samp></span>
                    </div>
                </div>
            </div>
            <div class="list clearfloat fl box-s">
                <div class="tu clearfloat">
                    <p class="jian"></p>
                    <img src="upload/list-tu.jpg"/>
                </div>
                <div class="center clearfloat">
                    <div class="tit fl">
                        <p class="normal">北京（大兴）1号院</p>
                        <p class="min">位置： 北京大兴</p>
                        <p class="min">面积： 1500.0㎡</p>
                        <span class="label-red">冷冻库</span>
                        <span class="label-blue">平台</span>
                    </div>
                    <div class="right clearfloat">
                        <span class="fr"><p class="price">0.11</p><samp>元/㎡/天/起</samp></span>
                    </div>
                </div>
            </div>
            <div class="list clearfloat fl box-s">
                <div class="tu clearfloat">
                    <p class="jian"></p>
                    <img src="upload/list-tu.jpg"/>
                </div>
                <div class="center clearfloat">
                    <div class="tit fl">
                        <p class="normal">北京（大兴）1号院</p>
                        <p class="min">位置： 北京大兴</p>
                        <p class="min">面积： 1500.0㎡</p>
                        <span class="label-red">冷冻库</span>
                        <span class="label-blue">平台</span>
                    </div>
                    <div class="right clearfloat">
                        <span class="fr"><p class="price">0.11</p><samp>元/㎡/天/起</samp></span>
                    </div>
                </div>
            </div>
            <div class="list clearfloat fl box-s">
                <div class="tu clearfloat">
                    <p class="jian"></p>
                    <img src="upload/list-tu.jpg"/>
                </div>
                <div class="center clearfloat">
                    <div class="tit fl">
                        <p class="normal">北京（大兴）1号院</p>
                        <p class="min">位置： 北京大兴</p>
                        <p class="min">面积： 1500.0㎡</p>
                        <span class="label-red">冷冻库</span>
                        <span class="label-blue">平台</span>
                    </div>
                    <div class="right clearfloat">
                        <span class="fr"><p class="price">0.11</p><samp>元/㎡/天/起</samp></span>
                    </div>
                </div>
            </div>
            <div class="list clearfloat fl box-s">
                <div class="tu clearfloat">
                    <p class="jian"></p>
                    <img src="upload/list-tu.jpg"/>
                </div>
                <div class="center clearfloat">
                    <div class="tit fl">
                        <p class="normal">北京（大兴）1号院</p>
                        <p class="min">位置： 北京大兴</p>
                        <p class="min">面积： 1500.0㎡</p>
                        <span class="label-red">冷冻库</span>
                        <span class="label-blue">平台</span>
                    </div>
                    <div class="right clearfloat">
                        <span class="fr"><p class="price">0.11</p><samp>元/㎡/天/起</samp></span>
                    </div>
                </div>
            </div>
            <div class="list clearfloat fl box-s">
                <div class="tu clearfloat">
                    <p class="jian"></p>
                    <img src="upload/list-tu.jpg"/>
                </div>
                <div class="center clearfloat">
                    <div class="tit fl">
                        <p class="normal">北京（大兴）1号院</p>
                        <p class="min">位置： 北京大兴</p>
                        <p class="min">面积： 1500.0㎡</p>
                        <span class="label-red">冷冻库</span>
                        <span class="label-blue">平台</span>
                    </div>
                    <div class="right clearfloat">
                        <span class="fr"><p class="price">0.11</p><samp>元/㎡/天/起</samp></span>
                    </div>
                </div>
            </div>-->
        </div>
    </div>

</div>
</body>

<script>
    $(function () {
        $(window).load(function () {
            $(".loading").addClass("loader-chanage")
            $(".loading").fadeOut(300)
        });
        // 页数
        var page = 0;
        // 每页展示5个
        var size = 5;
        var testCount = 0;
        $('.content').dropload({
            scrollArea : window,
//            autoLoad: false,
            loadDownFn : function(me){
                page++;
                // 拼接HTML
                var result = '';
                for(var i=0; i<5; i++){
                    result +=  '<div class="list clearfloat fl box-s"><div class="tu clearfloat"><p class="jian"></p><img src="upload/list-tu.jpg"/></div><div class="center clearfloat">                     <div class="tit fl">                         <p class="normal">北京（大兴）' +i+'号院</p>                         <p class="min">位置： 北京大兴</p>                         <p class="min">面积： 1500.0㎡</p>                         <span class="label-blue">普通库</span>                         <span class="label-blue">平台</span>                     </div>                     <div class="right clearfloat">                         <span class="fr"><p class="price">0.11</p><samp>元/㎡/天/起</samp></span>                     </div>                 </div>             </div>';
                }
                // 为了测试，延迟1秒加载
                setTimeout(function(){
                    // 插入数据到页面，放到最后面
                    $('.lists').append(result);
                    // 每次数据插入，必须重置
                    me.resetload();
                },1000);
                if (testCount ++ > 2) {
                    // 锁定
                    me.lock();
                    // 无数据
                    me.noData();
                }
//                $.ajax({
//                    type: 'GET',
//                    url: 'http://ons.me/tools/dropload/json.php?page='+page+'&size='+size,
//                    dataType: 'json',
//                    success: function(data){
//                        var arrLen = data.length;
//                        if(arrLen > 0){
//                            for(var i=0; i<arrLen; i++){
//                                result +=   '<a class="item opacity" href="'+data[i].link+'">'
//                                    +'<img src="'+data[i].pic+'" alt="">'
//                                    +'<h3>'+data[i].title+'</h3>'
//                                    +'<span class="date">'+data[i].date+'</span>'
//                                    +'</a>';
//                            }
//                            // 如果没有数据
//                        }else{
//                            // 锁定
//                            me.lock();
//                            // 无数据
//                            me.noData();
//                        }
//                        // 为了测试，延迟1秒加载
//                        setTimeout(function(){
//                            // 插入数据到页面，放到最后面
//                            $('.lists').append(result);
//                            // 每次数据插入，必须重置
//                            me.resetload();
//                        },1000);
//                    },
//                    error: function(xhr, type){
//                        // 即使加载出错，也得重置
//                        me.resetload();
//                    }
//                });
            }
        });
    });
</script>
</html>
